<template>
  <div>
    <!-- animate__animated -->
    <div
      class="full animate__animated animate__fadeInUpBig  animate__bounceOutDown"
      :style="{
        'background-image': `url(${playMusic.picUrl})`,
        'background-size': 'auto 100%',
        'background-origin': 'center center',
        filter: 'blur(30px)',
      }"
    ></div>
    <div
      class="
        fullscreen
        animate__animated animate__fadeInUpBig animate__bounceOutDown
      "
    >
      <i
        @click="$emit('hidefull', false)"
        class="fa fa-chevron-left"
        aria-hidden="true"
      ></i>
      <img :src="playMusic.picUrl" class="cover" />
      <div class="lyric">
        <ul :style="{ transform: `translateY(-${lyricIndex * 21}px)` }">
          <li
            v-for="(ly, index) in lyricArray"
            :key="index"
            :class="{ active: index == lyricIndex }"
          >
            {{ ly.lyric }}
          </li>
        </ul>
      </div>
      <div class="control">
        <!-- 进度条 数据绑定 和一个计算属性绑定. -->
        <span ref="playTime">{{ currentTime | filtertime }}</span>
        <input
          class="process"
          v-model="timeprocess"
          type="range"
          max="100"
          min="0"
        />
        <span ref="endTime">{{ duration | filtertime }}</span>
      </div>
      <div class="controls">
        <i @click="appears" class="fa fa-volume-down" aria-hidden="true"></i>
        <!-- 上一首 -->
        <i
          @click="$emit('changeMusic', 'prev')"
          class="fa fa-step-backward"
          aria-hidden="true"
        ></i>
        <i
          :class="[
            'fa',
            { 'fa-play-circle': !playState },
            { 'fa-pause-circle': playState },
          ]"
          @click="$emit('playpause')"
          aria-hidden="true"
        ></i>
        <!-- <i class="fa fa-pause-circle-o" aria-hidden="true"></i> -->
        <!-- 下一首 -->
        <i
          @click="$emit('changeMusic', 'next')"
          class="fa fa-step-forward"
          aria-hidden="true"
        ></i>
        <!-- 歌单 -->
        <i @click="appear" class="fa fa-bars" aria-hidden="true"></i>
      </div>
      <div v-show="songapper" class="playList animate__animated animate__flipInY">
        <h2>当前播放</h2>
        <p
          :class="{ active: pl.id == playMusic.id }"
          v-for="pl in playList"
          :key="pl.id"
          @click="$emit('changeMusic', pl)"
        >
          {{ pl.name }}
        </p>
      </div>
      <!-- v-model="timepro" -->
      <div class="footer">
        <input
          ref="volume"
          class="volumeBar"
          v-model="timepro"
          type="range"
          max="100"
          min="0"
          v-show="songappers"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    playMusic: Object,
    currentTime: Number,
    duration: Number,
    playState: Boolean,
    playList: Array,
    sound: Number,
  },
  data() {
    return {
      lyric: "",
      songapper: false,
      songappers: false,
      sounds: 0,
    };
  },
  created() {
    this.axios.get(`/lyric?id=${this.playMusic.id}`).then((result) => {
      this.lyric = result.data.lrc.lyric;
    });
    // console.log("zg", this.sound);
  },
  watch: {
    playMusic() {
      this.axios.get(`/lyric?id=${this.playMusic.id}`).then((result) => {
        this.lyric = result.data.lrc.lyric;
      });
    },
  },
  computed: {
    lyricArray() {
      if (this.lyric == "" || this.lyric.length < 1) return [];
      let arr = this.lyric.split("\n");
      arr.pop();
      let reg = /\[(\d+):(\d+.\d+)\](.*)/;
      let lyricArr = arr.map((ly) => {
        if (reg.test(ly)) {
          return {
            time: parseInt(RegExp.$1) * 60 + parseFloat(RegExp.$2),
            lyric: RegExp.$3,
          };
        }
      });
      return lyricArr;
    },
    lyricIndex() {
      if (this.lyricArray.length < 1) return 0;
      for (let i in this.lyricArray) {
        // console.log(i);输出的i是播放当前的歌词下标
        if (i > this.lyricArray.length - 2) {
          return this.lyricArray.length - 1;
        } else {
          if (
            this.currentTime > this.lyricArray[i].time &&
            this.lyricArray[parseInt(i) + 1].time > this.currentTime
          ) {
            return i;
          }
        }
      }
      return 1;
    },
    timeprocess: {
      get() {
        let process = (this.currentTime / this.duration) * 100;
        return process;
      },
      set(value) {
        let ctime = (value / 100) * this.duration;
        this.$emit("changeTime", ctime);
      },
    },
    timepro: {
      get() {
        return this.sound;
      },
      set(vals) {
        // console.log("vals",vals);
        this.$emit("change", vals);
      },
    },
  },
  methods: {
    appear() {
      this.songapper = !this.songapper;
    },
    appears() {
      this.songappers = !this.songappers;
    },
    // change(){
    //   this.sound=this.sounds
    // }
  },
  filters: {
    filtertime(val) {
      var sec = parseInt(val % 60);
      var minu = parseInt(val / 60);
      sec = sec < 10 ? "0" + sec : sec;
      minu = minu < 10 ? "0" + minu : minu;
      return minu + ":" + sec;
    },
  },
};
</script>

<style lang="less" scoped>
.full {
  position: fixed;
  z-index: 98;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  transform: scale(1.5);
  background: #000;
}
.fullscreen {
  position: fixed;
  z-index: 99;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  .fa-chevron-left {
    font-size: 20px;
    position: relative;
    top: 18px;
    left: 18px;
  }
  .cover {
    display: block;
    width: 40vw;
    height: 40vw;
    border-radius: 50%;
    margin: 0 auto;
  }
  .lyric {
    height: 50vh;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
    position: relative;
    ul {
      position: absolute;
      transition: transform 0.5s linear;
      top: 0px;
      left: 0px;
      width: 100%;
      li {
        height: 21px;
        &.active {
          color: rgb(6, 240, 150);
          font-size: 16px;
        }
      }
    }
  }
  .control {
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      display: inline-block;
    }
    .process {
      width: 70vw;
    }
  }
  .controls {
    position: fixed;
    bottom: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    i {
      flex: 1;
      text-align: center;
      font-size: 20px;
      &:nth-child(3) {
        font-size: 40px;
      }
    }
  }
  .playList {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    h2 {
      text-align: center;
      font-weight: bold;
      font-size: 16px;
      color: rgb(0, 0, 0);
    }
    position: relative;
    left: 174px;
    top: -430px;
    background: rgb(255, 255, 255);
    width: 200px;
    overflow: auto;
    max-height: 350px;
    p {
      color: rgb(0, 0, 0);
      line-height: 30px;
      text-align: center;
      &.active {
        color: #06f096;
      }
    }
  }
  .footer {
    position: absolute;
    bottom: 113px;
    left: 6px;
    .volumeBar {
      width: 15vw;
      height: 4px;
      background: white;
      transform: rotate(90deg);
    }
  }
}

input[type="range"] {
  appearance: none; /*清除系统默认样式*/
  width: 100%;
  // background:linear-gradient(left, red, yellow) no-repeat, #ddd;
  height: 4px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  background-size: 0% 100%;
  background: linear-gradient(
    to right,
    rgb(235, 191, 191),
    rgb(145, 145, 202),
    rgb(197, 84, 207)
  );
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none; /*清除系统默认样式*/
  height: 10px; /*拖动块高度*/
  width: 10px; /*拖动块宽度*/
  background: rgb(6, 168, 243); /*拖动块背景*/
  border-radius: 50%;
  border: solid 1px #ddd;
}
</style>